<template>
  <span v-if="isExternal" role="img" class="anticon app-iconify">
    <embed style="width: 1em; height: 1em" :src="buttonIcon" />
  </span>
  <component v-else-if="platform === 'PC'" :is="buttonIcon" />
  <u-icon v-else class="ai-icon" :name="buttonIcon" />
</template>

<script lang="ts">
  import { defineComponent, computed } from 'vue';
  import * as AntdIcon from '@ant-design/icons-vue';
  export default defineComponent({
    name: 'SvgView',
    components: { ...AntdIcon },
    props: {
      buttonIcon: {
        type: String,
        default: '',
      },
      platform: {
        type: String,
        default: 'PC',
      },
    },
    setup(props) {
      // 判断图标类型
      const isExternal = computed(() => {
        return /^(https?:|mailto:|tel:|data:image)/.test(props.buttonIcon);
      });
      return {
        isExternal,
      };
    },
  });
</script>
